<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-11-20 11:24:04
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-04-29 14:44:08
 * @FilePath: \cxl-driving-training\src\views\siteManagement\edit\Index.vue
-->
<template>
    <div class="page-box-detail" ref="pageBoxRef">
        <titleVue :title="data.operation.type === 'create' ? '新增' : '编辑'" big="true" />

        <div class="radio-group">
            <el-radio-group
                v-model="data.selectSubjectName"
                size="large"
                @change="
                    (res: any) => {
                        data.selectSubjectName = res
                    }
                "
            >
                <el-radio-button v-for="item in data.subjectList" :key="item" :label="item" />
            </el-radio-group>
        </div>
        <formVue
            ref="twoRef"
            :hidden="data.selectSubjectName !== data.subjectList[0]"
            :data="data.twoFormData"
            :disabled="data.operation.type === 'look' ? true : false"
        />
        <formVue
            ref="threeRef"
            :hidden="data.selectSubjectName !== data.subjectList[1]"
            :data="data.threeFormData"
            :disabled="data.operation.type === 'look' ? true : false"
        />

        <!-- 取消 保存 -->
        <div class="operation">
            <el-button @click="data.onCancel"> {{ data.operation.type === 'look' ? '返回' : '取消' }}</el-button>
            <el-button type="primary" @click="data.onSave(twoRef, threeRef)" v-if="data.operation.type !== 'look'"
                >保存</el-button
            >
        </div>
    </div>
</template>
<script setup lang="ts">
import titleVue from '@/components/title/Index.vue'
import { reactive, ref } from 'vue'
import DrivingSchoolOperation from '.'
import formVue from '@/components/form/Index.vue'

const pageBoxRef = ref()
const twoRef = ref()
const threeRef = ref()

const data = reactive(new DrivingSchoolOperation())
</script>
<style scoped lang="scss">
.operation {
    display: flex;
    justify-content: center;
    margin: 50px 0 100px 0;
    > button {
        margin: 0 30px;
    }
}

.radio-group {
    margin: 32px 0 32px 72px;
}
</style>
